<!--  -->
<template>
    <header class="lognBar">
        <div class="login-imag">
            login
        </div>
        <div class="logn-text">
           <div v-if="!nickName">
                <a href="javascript:void(0);" @click.stop = "showflag=true">登录</a>
                <a href="javascript:void(0);">注册</a>
           </div>
           <div v-else>
               <a href="javascript:void(0);">{{nickName}}</a>
               <a href="javascript:void(0);" @click.stop="logout">退出</a>
               <a href="javascript:void(0);" class="iconfont icon-gouwucheman">
                    <span class="yy" v-show="goodsCartCount">{{goodsCartCount}}</span>
               </a>
           </div>
        </div>
        <div class="model" v-if="showflag">
            <div class="model-w">
                <div class="title">登录</div>
                <span>{{loginTip}}</span>
                <div class="username-w">
                    <input type="text" name="userName" v-model="userName" @blur="tipEvent">
                    <span class="tip">{{usertip}}</span>
                </div>
                <div class="password-w">
                    <input type="password" v-model="userPassword" name="userPassword" >
                </div>
                <div class="btn">
                    <button type="button" @click="btnLogin">登录</button>
                </div>
                
            </div>
            <div class="close">
                <span class="x" @click="showflag=false">×</span>
            </div>
        </div>
        <div class="mt" v-if="showflag">dd</div>
    </header>
</template>

<script>
    import Vue from 'vue'
    import { mapState,mapActions,mapGetters,mapMutations} from 'vuex'
    export default {
       components: {},
       data() {
           return {
               userName:"",
               userPassword:"",
               usertip:"",
               loginTip:"",
               showflag:false
           };
       },
       computed: {
          ...mapState(['nickName','goodsCartCount'])
       },
       watch: {},
       methods: {
           init(){
               this.userName="",
               this.userPassword="",
               this.usertip="",
               this.loginTip="",
               this.showflag=false
           },
           tipEvent(){
               let _this = this;
               axios.get('/users/user', {
                    params: {
                        userName:this.userName,
                    }
                })
                .then(function (response) {
                     let {data,errno} = response.data;
                     if(!errno){
                       _this.usertip ="";
                     }
                    else {
                        _this.usertip ="该用户不存在";
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
           },
           btnLogin(){
               let _this = this;
               axios.post('/users/login', {
                   userName:this.userName,
                   userPassword:this.userPassword
                })
                .then(function (response) {
                    let {data,errno} = response.data;
                   if(!errno){
                       _this.$emit("logn",{res:"success",type:"登录"});
                    //    _this.nickName=data.userName;
                       _this.$store.commit("setNickName",{"nickName":data.userName});
                       _this.getGoodsCount();
                       _this.init();
                   }
                   else {
                       _this.$emit("logn",{res:"err",type:"登录"});
                       _this.loginTip = "用户名和密码错误"
                   }
                })
                .catch(function (error) {
                    console.log(error);
                });
           },
           logout(){
               let _this = this;
              axios.get('/users/logout', {
                   
                })
                .then(function (response) {
                     let {data,errno} = response.data;
                     if(!errno){
                       _this.$store.commit("setNickName",{"nickName":""});
                       _this.$store.commit("setCount",{count:0,init:true})                
                       _this.$emit("logn",{res:"success",type:"退出"})
                     }
                    else {
                        // _this.usertip ="该用户不存在";
                       _this.$emit("logn",{res:"err",type:"退出"})

                    }
                })
                .catch(function (error) {
                    console.log(error);
                }); 
           },
           islogin(){
                let _this = this;
                axios.get('/users/islogin', {
                    params: {
                        
                    }
                })
                .then(function (response) {
                     let {data,errno} = response;
                     if(!errno){
                        _this.$store.commit("setNickName",{"nickName":data.data.nickname});
                        _this.getGoodsCount();
                     }else if(errno==10111){
                        _this.$store.commit("setNickName",{"nickName":""})
                         
                     }
                     else {
                         window.alert("系统错误");
                     }
                })
                .catch(function (error) {
                    console.log(error);
                });
           },
           getGoodsCount(){
                axios.get('/goods/cartCount', {
                    params: {
                        
                    }
                })
                .then(response => {
                     let {data,errno} = response;
                     this.$store.commit("setCount",{count:data.data,init:true})          
                })
                .catch(function (error) {
                    console.log(error);
                });
           }
       },
       created() {
           this.islogin()
       },
       mounted() {

       },
       beforeCreate() {}, //生命周期 - 创建之前
       beforeMount() {}, //生命周期 - 挂载之前
       beforeUpdate() {}, //生命周期 - 更新之前
       beforeDestroy() {}, //生命周期 - 销毁之前
       activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
    }
</script>
<style lang='less'>
    .lognBar{
        display: flex;
        height: 50px;
        line-height: 50px;
        background:#eee;
     .login-imag{
         width:75%;
         
         padding-left: 10%;
     }   
     .logn-text{
         width:15%;
         .yy{
             display: inline-block;
             width:16px;
             height: 16px;
             position: absolute;
             background: orangered;
             text-align: center;
             border-radius: 50%;
             line-height: 16px;
             top:-8px;
             right:-8px;
             color:#fff;
             font-size:10px;
         }
         div{

             a.icon-gouwucheman{
                 font-size:20px;
                 position: relative;
             }
         }
     }
     .model{
         position: fixed;
         top:50%;
         left:50%;
         width:400px;
         height: auto;
         font-size:12px;
         background: rgba(255,255,255, 0.85);
         transform: translate(-50%, -50%);
         z-index: 101;
         .close{
             position:absolute;
             top:0px;
             right:5px;
             span{
                 font-size:35px;
                 display: inline-block;
                
             }
         }
         .model-w{padding:0 0 0 30px; &>div{margin-top:20px;}}
         .password-w{margin-bottom: 20px;}
         input,button{width:70%;}
         .btn{width:90%;margin:20px 0;}
     }
     .mt{
         position: fixed;
         top:0;
         left:0;
         width:100%;
         height: 100%;
         background: rgba(0, 0, 0, 0.65);
         z-index: 100;
         
     }
    }
</style>